
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianhua"></use>
                    </svg>
                    <div class="name">电话</div>
                    <div class="fontclass">#icon-dianhua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianhuajianpan"></use>
                    </svg>
                    <div class="name">电话键盘</div>
                    <div class="fontclass">#icon-dianhuajianpan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huchudianhua"></use>
                    </svg>
                    <div class="name">呼出电话</div>
                    <div class="fontclass">#icon-huchudianhua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-laidianxianshi"></use>
                    </svg>
                    <div class="name">来电显示</div>
                    <div class="fontclass">#icon-laidianxianshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mima"></use>
                    </svg>
                    <div class="name">密码</div>
                    <div class="fontclass">#icon-mima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuzuche"></use>
                    </svg>
                    <div class="name">出租车</div>
                    <div class="fontclass">#icon-chuzuche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dengpaotishi"></use>
                    </svg>
                    <div class="name">灯泡提示</div>
                    <div class="fontclass">#icon-dengpaotishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-feijichang"></use>
                    </svg>
                    <div class="name">飞机场</div>
                    <div class="fontclass">#icon-feijichang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hujiaozhuanyi"></use>
                    </svg>
                    <div class="name">呼叫转移</div>
                    <div class="fontclass">#icon-hujiaozhuanyi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huangguan"></use>
                    </svg>
                    <div class="name">皇冠</div>
                    <div class="fontclass">#icon-huangguan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huochezhan"></use>
                    </svg>
                    <div class="name">火车站</div>
                    <div class="fontclass">#icon-huochezhan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qichezhan"></use>
                    </svg>
                    <div class="name">汽车站</div>
                    <div class="fontclass">#icon-qichezhan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qunzu"></use>
                    </svg>
                    <div class="name">群组</div>
                    <div class="fontclass">#icon-qunzu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-shezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shengyin"></use>
                    </svg>
                    <div class="name">声音</div>
                    <div class="fontclass">#icon-shengyin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shizhong"></use>
                    </svg>
                    <div class="name">时钟</div>
                    <div class="fontclass">#icon-shizhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="fontclass">#icon-shouye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-sousuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjiayonghu"></use>
                    </svg>
                    <div class="name">添加用户</div>
                    <div class="fontclass">#icon-tianjiayonghu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tongxunlu"></use>
                    </svg>
                    <div class="name">通讯录</div>
                    <div class="fontclass">#icon-tongxunlu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiugai"></use>
                    </svg>
                    <div class="name">修改</div>
                    <div class="fontclass">#icon-xiugai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                    </svg>
                    <div class="name">用户</div>
                    <div class="fontclass">#icon-yonghu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zan"></use>
                    </svg>
                    <div class="name">赞</div>
                    <div class="fontclass">#icon-zan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianhuaqiaguzhang"></use>
                    </svg>
                    <div class="name">电话卡故障</div>
                    <div class="fontclass">#icon-dianhuaqiaguzhang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duihuaxinxi"></use>
                    </svg>
                    <div class="name">对话信息</div>
                    <div class="fontclass">#icon-duihuaxinxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rili"></use>
                    </svg>
                    <div class="name">日历</div>
                    <div class="fontclass">#icon-rili</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shipin"></use>
                    </svg>
                    <div class="name">视频</div>
                    <div class="fontclass">#icon-shipin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjiadianhuaqia"></use>
                    </svg>
                    <div class="name">添加sim卡</div>
                    <div class="fontclass">#icon-tianjiadianhuaqia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tupian"></use>
                    </svg>
                    <div class="name">图片</div>
                    <div class="fontclass">#icon-tupian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wuliu"></use>
                    </svg>
                    <div class="name">物流</div>
                    <div class="fontclass">#icon-wuliu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinfeng"></use>
                    </svg>
                    <div class="name">信封</div>
                    <div class="fontclass">#icon-xinfeng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yiyuan"></use>
                    </svg>
                    <div class="name">医院</div>
                    <div class="fontclass">#icon-yiyuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yinle"></use>
                    </svg>
                    <div class="name">音乐</div>
                    <div class="fontclass">#icon-yinle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youxi"></use>
                    </svg>
                    <div class="name">游戏</div>
                    <div class="fontclass">#icon-youxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuanshi"></use>
                    </svg>
                    <div class="name">钻石</div>
                    <div class="fontclass">#icon-zuanshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuoji"></use>
                    </svg>
                    <div class="name">座机</div>
                    <div class="fontclass">#icon-zuoji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ktv"></use>
                    </svg>
                    <div class="name">ktv</div>
                    <div class="fontclass">#icon-ktv</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-simqia"></use>
                    </svg>
                    <div class="name">sim卡</div>
                    <div class="fontclass">#icon-simqia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wifi"></use>
                    </svg>
                    <div class="name">wifi</div>
                    <div class="fontclass">#icon-wifi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-anquan"></use>
                    </svg>
                    <div class="name">安全</div>
                    <div class="fontclass">#icon-anquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bangzhu"></use>
                    </svg>
                    <div class="name">帮助</div>
                    <div class="fontclass">#icon-bangzhu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bukaixin"></use>
                    </svg>
                    <div class="name">不开心</div>
                    <div class="fontclass">#icon-bukaixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dibiao"></use>
                    </svg>
                    <div class="name">地标</div>
                    <div class="fontclass">#icon-dibiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenleiorguangchangorqita"></use>
                    </svg>
                    <div class="name">分类or广场or其他</div>
                    <div class="fontclass">#icon-fenleiorguangchangorqita</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenxiang"></use>
                    </svg>
                    <div class="name">分享</div>
                    <div class="fontclass">#icon-fenxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaxingshoucang"></use>
                    </svg>
                    <div class="name">加星收藏</div>
                    <div class="fontclass">#icon-jiaxingshoucang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinzhitishi"></use>
                    </svg>
                    <div class="name">禁止提示</div>
                    <div class="fontclass">#icon-jinzhitishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kaixin"></use>
                    </svg>
                    <div class="name">开心</div>
                    <div class="fontclass">#icon-kaixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liwu"></use>
                    </svg>
                    <div class="name">礼物</div>
                    <div class="fontclass">#icon-liwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qian"></use>
                    </svg>
                    <div class="name">钱</div>
                    <div class="fontclass">#icon-qian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qingdan"></use>
                    </svg>
                    <div class="name">清单</div>
                    <div class="fontclass">#icon-qingdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjia"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#icon-tianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiai"></use>
                    </svg>
                    <div class="name">喜爱</div>
                    <div class="fontclass">#icon-xiai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengquetishi"></use>
                    </svg>
                    <div class="name">正确提示</div>
                    <div class="fontclass">#icon-zhengquetishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biaoqian"></use>
                    </svg>
                    <div class="name">标签</div>
                    <div class="fontclass">#icon-biaoqian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chongzhi"></use>
                    </svg>
                    <div class="name">充值</div>
                    <div class="fontclass">#icon-chongzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duigou"></use>
                    </svg>
                    <div class="name">对勾</div>
                    <div class="fontclass">#icon-duigou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duihuan"></use>
                    </svg>
                    <div class="name">兑换</div>
                    <div class="fontclass">#icon-duihuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-erweima"></use>
                    </svg>
                    <div class="name">二维码</div>
                    <div class="fontclass">#icon-erweima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gengduo"></use>
                    </svg>
                    <div class="name">更多</div>
                    <div class="fontclass">#icon-gengduo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanbi"></use>
                    </svg>
                    <div class="name">关闭</div>
                    <div class="fontclass">#icon-guanbi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantou"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-jiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinbiduihuan"></use>
                    </svg>
                    <div class="name">金币兑换</div>
                    <div class="fontclass">#icon-jinbiduihuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-saoyisao"></use>
                    </svg>
                    <div class="name">扫一扫</div>
                    <div class="fontclass">#icon-saoyisao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuan"></use>
                    </svg>
                    <div class="name">上传</div>
                    <div class="fontclass">#icon-shangchuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuaxin"></use>
                    </svg>
                    <div class="name">刷新</div>
                    <div class="fontclass">#icon-shuaxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tiquliuliang"></use>
                    </svg>
                    <div class="name">提取流量</div>
                    <div class="fontclass">#icon-tiquliuliang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiazai"></use>
                    </svg>
                    <div class="name">下载</div>
                    <div class="fontclass">#icon-xiazai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youhuiquan"></use>
                    </svg>
                    <div class="name">优惠券</div>
                    <div class="fontclass">#icon-youhuiquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanzengliuliang"></use>
                    </svg>
                    <div class="name">转赠流量</div>
                    <div class="fontclass">#icon-zhuanzengliuliang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanqugengduoliuliang"></use>
                    </svg>
                    <div class="name">赚取更多流量</div>
                    <div class="fontclass">#icon-zhuanqugengduoliuliang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cuowutishi"></use>
                    </svg>
                    <div class="name">错误提示</div>
                    <div class="fontclass">#icon-cuowutishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-alitongxinlogo"></use>
                    </svg>
                    <div class="name">阿里通信logo</div>
                    <div class="fontclass">#icon-alitongxinlogo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-simqiaguzhang"></use>
                    </svg>
                    <div class="name">sim卡故障</div>
                    <div class="fontclass">#icon-simqiaguzhang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-anquantianchong"></use>
                    </svg>
                    <div class="name">安全_填充</div>
                    <div class="fontclass">#icon-anquantianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bangzhutianchong"></use>
                    </svg>
                    <div class="name">帮助_填充</div>
                    <div class="fontclass">#icon-bangzhutianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bukaixintianchong"></use>
                    </svg>
                    <div class="name">不开心_填充</div>
                    <div class="fontclass">#icon-bukaixintianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuzuchetianchong"></use>
                    </svg>
                    <div class="name">出租车_填充</div>
                    <div class="fontclass">#icon-chuzuchetianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cuowutishitianchong"></use>
                    </svg>
                    <div class="name">错误提示_填充</div>
                    <div class="fontclass">#icon-cuowutishitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dibiaotianchong"></use>
                    </svg>
                    <div class="name">地标_填充</div>
                    <div class="fontclass">#icon-dibiaotianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dengdaitianchong"></use>
                    </svg>
                    <div class="name">等待_填充</div>
                    <div class="fontclass">#icon-dengdaitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianhuatianchong"></use>
                    </svg>
                    <div class="name">电话_填充</div>
                    <div class="fontclass">#icon-dianhuatianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianhuajianpantianchong"></use>
                    </svg>
                    <div class="name">电话键盘_填充</div>
                    <div class="fontclass">#icon-dianhuajianpantianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duihuaxinxitianchong"></use>
                    </svg>
                    <div class="name">对话信息_填充</div>
                    <div class="fontclass">#icon-duihuaxinxitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-faxiantianchong"></use>
                    </svg>
                    <div class="name">发现_填充</div>
                    <div class="fontclass">#icon-faxiantianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-feijichangtianchong"></use>
                    </svg>
                    <div class="name">飞机场_填充</div>
                    <div class="fontclass">#icon-feijichangtianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenleiorguangchangorqitatianchong"></use>
                    </svg>
                    <div class="name">分类or广场or其他_填充</div>
                    <div class="fontclass">#icon-fenleiorguangchangorqitatianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenxiangtianchong"></use>
                    </svg>
                    <div class="name">分享_填充</div>
                    <div class="fontclass">#icon-fenxiangtianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gengduotianchong"></use>
                    </svg>
                    <div class="name">更多_填充</div>
                    <div class="fontclass">#icon-gengduotianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huchudianhuatianchong"></use>
                    </svg>
                    <div class="name">呼出电话_填充</div>
                    <div class="fontclass">#icon-huchudianhuatianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hujiaozhuanyitianchong"></use>
                    </svg>
                    <div class="name">呼叫转移_填充</div>
                    <div class="fontclass">#icon-hujiaozhuanyitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaxingshoucangtianchong"></use>
                    </svg>
                    <div class="name">加星收藏_填充</div>
                    <div class="fontclass">#icon-jiaxingshoucangtianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kaixintianchong"></use>
                    </svg>
                    <div class="name">开心_填充</div>
                    <div class="fontclass">#icon-kaixintianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-laidianxianshitianchong"></use>
                    </svg>
                    <div class="name">来电显示_填充</div>
                    <div class="fontclass">#icon-laidianxianshitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lipintianchong"></use>
                    </svg>
                    <div class="name">礼品_填充</div>
                    <div class="fontclass">#icon-lipintianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qichezhantianchong"></use>
                    </svg>
                    <div class="name">汽车站_填充</div>
                    <div class="fontclass">#icon-qichezhantianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiantianchong"></use>
                    </svg>
                    <div class="name">钱_填充</div>
                    <div class="fontclass">#icon-qiantianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qunzutianchong"></use>
                    </svg>
                    <div class="name">群组_填充</div>
                    <div class="fontclass">#icon-qunzutianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchutianchong"></use>
                    </svg>
                    <div class="name">删除_填充</div>
                    <div class="fontclass">#icon-shanchutianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhitianchong"></use>
                    </svg>
                    <div class="name">设置_填充</div>
                    <div class="fontclass">#icon-shezhitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shizhongtianchong"></use>
                    </svg>
                    <div class="name">时钟_填充</div>
                    <div class="fontclass">#icon-shizhongtianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shipintianchong"></use>
                    </svg>
                    <div class="name">视频_填充</div>
                    <div class="fontclass">#icon-shipintianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouyetianchong"></use>
                    </svg>
                    <div class="name">首页_填充</div>
                    <div class="fontclass">#icon-shouyetianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuotianchong"></use>
                    </svg>
                    <div class="name">搜索_填充</div>
                    <div class="fontclass">#icon-sousuotianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tixingtianchong"></use>
                    </svg>
                    <div class="name">提醒_填充</div>
                    <div class="fontclass">#icon-tixingtianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjiatianchong"></use>
                    </svg>
                    <div class="name">添加_填充</div>
                    <div class="fontclass">#icon-tianjiatianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjiayonghutianchong"></use>
                    </svg>
                    <div class="name">添加用户_填充</div>
                    <div class="fontclass">#icon-tianjiayonghutianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjiasimqiatianchong"></use>
                    </svg>
                    <div class="name">添加sim卡_填充</div>
                    <div class="fontclass">#icon-tianjiasimqiatianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tongxunlutianchong"></use>
                    </svg>
                    <div class="name">通讯录_填充</div>
                    <div class="fontclass">#icon-tongxunlutianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wuliutianchong"></use>
                    </svg>
                    <div class="name">物流_填充</div>
                    <div class="fontclass">#icon-wuliutianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaitianchong"></use>
                    </svg>
                    <div class="name">喜爱_填充</div>
                    <div class="fontclass">#icon-xiaitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinfengtianchong"></use>
                    </svg>
                    <div class="name">信封_填充</div>
                    <div class="fontclass">#icon-xinfengtianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiugaitianchong"></use>
                    </svg>
                    <div class="name">修改_填充</div>
                    <div class="fontclass">#icon-xiugaitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yiyuantianchong"></use>
                    </svg>
                    <div class="name">医院_填充</div>
                    <div class="fontclass">#icon-yiyuantianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yinletianchong"></use>
                    </svg>
                    <div class="name">音乐_填充</div>
                    <div class="fontclass">#icon-yinletianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yonghutianchong"></use>
                    </svg>
                    <div class="name">用户_填充</div>
                    <div class="fontclass">#icon-yonghutianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zantianchong"></use>
                    </svg>
                    <div class="name">赞_填充</div>
                    <div class="fontclass">#icon-zantianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengquetishitianchong"></use>
                    </svg>
                    <div class="name">正确提示_填充</div>
                    <div class="fontclass">#icon-zhengquetishitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuanshitianchong"></use>
                    </svg>
                    <div class="name">钻石_填充</div>
                    <div class="fontclass">#icon-zuanshitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuojitianchong"></use>
                    </svg>
                    <div class="name">座机_填充</div>
                    <div class="fontclass">#icon-zuojitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ktvtianchong"></use>
                    </svg>
                    <div class="name">ktv_填充</div>
                    <div class="fontclass">#icon-ktvtianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-simguzhangtianchong"></use>
                    </svg>
                    <div class="name">sim故障_填充</div>
                    <div class="fontclass">#icon-simguzhangtianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-simqiatianchong"></use>
                    </svg>
                    <div class="name">sim卡_填充</div>
                    <div class="fontclass">#icon-simqiatianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wifitianchong"></use>
                    </svg>
                    <div class="name">wifi_填充</div>
                    <div class="fontclass">#icon-wifitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qingdantianchong"></use>
                    </svg>
                    <div class="name">清单_填充</div>
                    <div class="fontclass">#icon-qingdantianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rilitianchong"></use>
                    </svg>
                    <div class="name">日历_填充</div>
                    <div class="fontclass">#icon-rilitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huochezhantianchong"></use>
                    </svg>
                    <div class="name">火车站_填充</div>
                    <div class="fontclass">#icon-huochezhantianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tupiantianchong"></use>
                    </svg>
                    <div class="name">图片_填充</div>
                    <div class="fontclass">#icon-tupiantianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shengyintianchong"></use>
                    </svg>
                    <div class="name">声音_填充</div>
                    <div class="fontclass">#icon-shengyintianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youxitianchong"></use>
                    </svg>
                    <div class="name">游戏_填充</div>
                    <div class="fontclass">#icon-youxitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wangting"></use>
                    </svg>
                    <div class="name">网厅</div>
                    <div class="fontclass">#icon-wangting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouji"></use>
                    </svg>
                    <div class="name">手机</div>
                    <div class="fontclass">#icon-shouji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youhuiquanwenzi"></use>
                    </svg>
                    <div class="name">优惠券_文字</div>
                    <div class="fontclass">#icon-youhuiquanwenzi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoujitianchong"></use>
                    </svg>
                    <div class="name">手机_填充</div>
                    <div class="fontclass">#icon-shoujitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kuandai"></use>
                    </svg>
                    <div class="name">宽带</div>
                    <div class="fontclass">#icon-kuandai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wangtingtianchong"></use>
                    </svg>
                    <div class="name">网厅_填充</div>
                    <div class="fontclass">#icon-wangtingtianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangjia"></use>
                    </svg>
                    <div class="name">商家</div>
                    <div class="fontclass">#icon-shangjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shizhongxin"></use>
                    </svg>
                    <div class="name">市中心</div>
                    <div class="fontclass">#icon-shizhongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kuandaitianchong"></use>
                    </svg>
                    <div class="name">宽带_填充</div>
                    <div class="fontclass">#icon-kuandaitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xuanzekuangmoren"></use>
                    </svg>
                    <div class="name">选择框_默认</div>
                    <div class="fontclass">#icon-xuanzekuangmoren</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chongliuliangtianchong"></use>
                    </svg>
                    <div class="name">充流量_填充</div>
                    <div class="fontclass">#icon-chongliuliangtianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chongliuliang"></use>
                    </svg>
                    <div class="name">充流量</div>
                    <div class="fontclass">#icon-chongliuliang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoujitianchong1"></use>
                    </svg>
                    <div class="name">手机_填充</div>
                    <div class="fontclass">#icon-shoujitianchong1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoujichongzhitianchong"></use>
                    </svg>
                    <div class="name">手机充值_填充</div>
                    <div class="fontclass">#icon-shoujichongzhitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouji1"></use>
                    </svg>
                    <div class="name">手机</div>
                    <div class="fontclass">#icon-shouji1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoujichongzhi"></use>
                    </svg>
                    <div class="name">手机充值</div>
                    <div class="fontclass">#icon-shoujichongzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shurutianchong"></use>
                    </svg>
                    <div class="name">输入_填充</div>
                    <div class="fontclass">#icon-shurutianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuru"></use>
                    </svg>
                    <div class="name">输入</div>
                    <div class="fontclass">#icon-shuru</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiajiantou"></use>
                    </svg>
                    <div class="name">下箭头</div>
                    <div class="fontclass">#icon-xiajiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yibantishi"></use>
                    </svg>
                    <div class="name">一般提示</div>
                    <div class="fontclass">#icon-yibantishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yanjing"></use>
                    </svg>
                    <div class="name">眼睛</div>
                    <div class="fontclass">#icon-yanjing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cesu"></use>
                    </svg>
                    <div class="name">测速</div>
                    <div class="fontclass">#icon-cesu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chahuafeitianchong"></use>
                    </svg>
                    <div class="name">查话费_填充</div>
                    <div class="fontclass">#icon-chahuafeitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fasongxinxitianchong"></use>
                    </svg>
                    <div class="name">发送信息_填充</div>
                    <div class="fontclass">#icon-fasongxinxitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fasongxinxi"></use>
                    </svg>
                    <div class="name">发送信息</div>
                    <div class="fontclass">#icon-fasongxinxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenbenbianjitianchong"></use>
                    </svg>
                    <div class="name">文本编辑_填充</div>
                    <div class="fontclass">#icon-wenbenbianjitianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenbenbianji"></use>
                    </svg>
                    <div class="name">文本编辑</div>
                    <div class="fontclass">#icon-wenbenbianji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chahuafei"></use>
                    </svg>
                    <div class="name">查话费</div>
                    <div class="fontclass">#icon-chahuafei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye1"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="fontclass">#icon-shouye1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-anquan1"></use>
                    </svg>
                    <div class="name">安全</div>
                    <div class="fontclass">#icon-anquan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baohusan"></use>
                    </svg>
                    <div class="name">保护伞</div>
                    <div class="fontclass">#icon-baohusan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dibiao1"></use>
                    </svg>
                    <div class="name">地标</div>
                    <div class="fontclass">#icon-dibiao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-aixin"></use>
                    </svg>
                    <div class="name">爱心</div>
                    <div class="fontclass">#icon-aixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dengpao"></use>
                    </svg>
                    <div class="name">灯泡</div>
                    <div class="fontclass">#icon-dengpao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duanxin"></use>
                    </svg>
                    <div class="name">短信</div>
                    <div class="fontclass">#icon-duanxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diannao"></use>
                    </svg>
                    <div class="name">电脑</div>
                    <div class="fontclass">#icon-diannao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-erweima1"></use>
                    </svg>
                    <div class="name">二维码</div>
                    <div class="fontclass">#icon-erweima1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duihuan1"></use>
                    </svg>
                    <div class="name">兑换</div>
                    <div class="fontclass">#icon-duihuan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duofangtonghua"></use>
                    </svg>
                    <div class="name">多方通话</div>
                    <div class="fontclass">#icon-duofangtonghua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenxiang1"></use>
                    </svg>
                    <div class="name">分享</div>
                    <div class="fontclass">#icon-fenxiang1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwushangcheng"></use>
                    </svg>
                    <div class="name">购物商城</div>
                    <div class="fontclass">#icon-gouwushangcheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanbi1"></use>
                    </svg>
                    <div class="name">关闭</div>
                    <div class="fontclass">#icon-guanbi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guhua"></use>
                    </svg>
                    <div class="name">固话</div>
                    <div class="fontclass">#icon-guhua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwuche"></use>
                    </svg>
                    <div class="name">购物车</div>
                    <div class="fontclass">#icon-gouwuche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jilu"></use>
                    </svg>
                    <div class="name">记录</div>
                    <div class="fontclass">#icon-jilu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kuaidiyunshu"></use>
                    </svg>
                    <div class="name">快递运输</div>
                    <div class="fontclass">#icon-kuaidiyunshu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hongbao"></use>
                    </svg>
                    <div class="name">红包</div>
                    <div class="fontclass">#icon-hongbao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huangguan1"></use>
                    </svg>
                    <div class="name">皇冠</div>
                    <div class="fontclass">#icon-huangguan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quan"></use>
                    </svg>
                    <div class="name">券</div>
                    <div class="fontclass">#icon-quan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qun"></use>
                    </svg>
                    <div class="name">群</div>
                    <div class="fontclass">#icon-qun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-saoma"></use>
                    </svg>
                    <div class="name">扫码</div>
                    <div class="fontclass">#icon-saoma</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiche"></use>
                    </svg>
                    <div class="name">汽车</div>
                    <div class="fontclass">#icon-qiche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lipin"></use>
                    </svg>
                    <div class="name">礼品</div>
                    <div class="fontclass">#icon-lipin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu1"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuan1"></use>
                    </svg>
                    <div class="name">上传</div>
                    <div class="fontclass">#icon-shangchuan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kuandai1"></use>
                    </svg>
                    <div class="name">宽带</div>
                    <div class="fontclass">#icon-kuandai1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shengyin1"></use>
                    </svg>
                    <div class="name">声音</div>
                    <div class="fontclass">#icon-shengyin1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shirenrenzheng"></use>
                    </svg>
                    <div class="name">实人认证</div>
                    <div class="fontclass">#icon-shirenrenzheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi1"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-shezhi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shipin1"></use>
                    </svg>
                    <div class="name">视频</div>
                    <div class="fontclass">#icon-shipin1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouji2"></use>
                    </svg>
                    <div class="name">手机</div>
                    <div class="fontclass">#icon-shouji2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoucang"></use>
                    </svg>
                    <div class="name">收藏</div>
                    <div class="fontclass">#icon-shoucang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo1"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-sousuo1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuaxin1"></use>
                    </svg>
                    <div class="name">刷新</div>
                    <div class="fontclass">#icon-shuaxin1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-taocanyuliang"></use>
                    </svg>
                    <div class="name">套餐余量</div>
                    <div class="fontclass">#icon-taocanyuliang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-suo"></use>
                    </svg>
                    <div class="name">锁</div>
                    <div class="fontclass">#icon-suo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tiquliuliang1"></use>
                    </svg>
                    <div class="name">提取流量</div>
                    <div class="fontclass">#icon-tiquliuliang1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tonghua"></use>
                    </svg>
                    <div class="name">通话</div>
                    <div class="fontclass">#icon-tonghua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tongji"></use>
                    </svg>
                    <div class="name">统计</div>
                    <div class="fontclass">#icon-tongji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wendang"></use>
                    </svg>
                    <div class="name">文档</div>
                    <div class="fontclass">#icon-wendang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tupian1"></use>
                    </svg>
                    <div class="name">图片</div>
                    <div class="fontclass">#icon-tupian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tongxunlu1"></use>
                    </svg>
                    <div class="name">通讯录</div>
                    <div class="fontclass">#icon-tongxunlu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenjianjia"></use>
                    </svg>
                    <div class="name">文件夹</div>
                    <div class="fontclass">#icon-wenjianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wendangxiugai"></use>
                    </svg>
                    <div class="name">文档修改</div>
                    <div class="fontclass">#icon-wendangxiugai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiyiji"></use>
                    </svg>
                    <div class="name">洗衣机</div>
                    <div class="fontclass">#icon-xiyiji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiazai1"></use>
                    </svg>
                    <div class="name">下载</div>
                    <div class="fontclass">#icon-xiazai1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodetongxin"></use>
                    </svg>
                    <div class="name">我的通信</div>
                    <div class="fontclass">#icon-wodetongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangji"></use>
                    </svg>
                    <div class="name">相机</div>
                    <div class="fontclass">#icon-xiangji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinxi"></use>
                    </svg>
                    <div class="name">信息</div>
                    <div class="fontclass">#icon-xinxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yingyeting"></use>
                    </svg>
                    <div class="name">营业厅</div>
                    <div class="fontclass">#icon-yingyeting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yibantishi1"></use>
                    </svg>
                    <div class="name">一般提示</div>
                    <div class="fontclass">#icon-yibantishi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yuliang"></use>
                    </svg>
                    <div class="name">余量</div>
                    <div class="fontclass">#icon-yuliang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zan1"></use>
                    </svg>
                    <div class="name">赞</div>
                    <div class="fontclass">#icon-zan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengquetishi1"></use>
                    </svg>
                    <div class="name">正确提示</div>
                    <div class="fontclass">#icon-zhengquetishi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhongyaotishi"></use>
                    </svg>
                    <div class="name">重要提示</div>
                    <div class="fontclass">#icon-zhongyaotishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yonghu1"></use>
                    </svg>
                    <div class="name">用户</div>
                    <div class="fontclass">#icon-yonghu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yunduantongbu"></use>
                    </svg>
                    <div class="name">云端同步</div>
                    <div class="fontclass">#icon-yunduantongbu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanzengliuliang1"></use>
                    </svg>
                    <div class="name">转赠流量</div>
                    <div class="fontclass">#icon-zhuanzengliuliang1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-simqia1"></use>
                    </svg>
                    <div class="name">sim卡</div>
                    <div class="fontclass">#icon-simqia1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuanshi1"></use>
                    </svg>
                    <div class="name">钻石</div>
                    <div class="fontclass">#icon-zuanshi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wifi1"></use>
                    </svg>
                    <div class="name">wifi</div>
                    <div class="fontclass">#icon-wifi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanquliuliang"></use>
                    </svg>
                    <div class="name">赚取流量</div>
                    <div class="fontclass">#icon-zhuanquliuliang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yujing"></use>
                    </svg>
                    <div class="name">预警</div>
                    <div class="fontclass">#icon-yujing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kaixin1"></use>
                    </svg>
                    <div class="name">开心</div>
                    <div class="fontclass">#icon-kaixin1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bangding"></use>
                    </svg>
                    <div class="name">绑定</div>
                    <div class="fontclass">#icon-bangding</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fapiao"></use>
                    </svg>
                    <div class="name">发票</div>
                    <div class="fontclass">#icon-fapiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiechubangding"></use>
                    </svg>
                    <div class="name">解除绑定</div>
                    <div class="fontclass">#icon-jiechubangding</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rili1"></use>
                    </svg>
                    <div class="name">日历</div>
                    <div class="fontclass">#icon-rili1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shijian"></use>
                    </svg>
                    <div class="name">时间</div>
                    <div class="fontclass">#icon-shijian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guojiliuliangbao"></use>
                    </svg>
                    <div class="name">国际流量包</div>
                    <div class="fontclass">#icon-guojiliuliangbao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-taocan"></use>
                    </svg>
                    <div class="name">套餐</div>
                    <div class="fontclass">#icon-taocan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhangdan"></use>
                    </svg>
                    <div class="name">账单</div>
                    <div class="fontclass">#icon-zhangdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huafeiquan"></use>
                    </svg>
                    <div class="name">话费券</div>
                    <div class="fontclass">#icon-huafeiquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liuliangquan"></use>
                    </svg>
                    <div class="name">流量券</div>
                    <div class="fontclass">#icon-liuliangquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duigou1"></use>
                    </svg>
                    <div class="name">对勾</div>
                    <div class="fontclass">#icon-duigou1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangjiantou"></use>
                    </svg>
                    <div class="name">上箭头</div>
                    <div class="fontclass">#icon-shangjiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiajiantou1"></use>
                    </svg>
                    <div class="name">下箭头</div>
                    <div class="fontclass">#icon-xiajiantou1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youjiantou"></use>
                    </svg>
                    <div class="name">右箭头</div>
                    <div class="fontclass">#icon-youjiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoguanbi"></use>
                    </svg>
                    <div class="name">小关闭</div>
                    <div class="fontclass">#icon-xiaoguanbi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuojiantou"></use>
                    </svg>
                    <div class="name">左箭头</div>
                    <div class="fontclass">#icon-zuojiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoujichongzhi1"></use>
                    </svg>
                    <div class="name">手机充值</div>
                    <div class="fontclass">#icon-shoujichongzhi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiajiantou2"></use>
                    </svg>
                    <div class="name">下箭头</div>
                    <div class="fontclass">#icon-xiajiantou2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duigou2"></use>
                    </svg>
                    <div class="name">对勾</div>
                    <div class="fontclass">#icon-duigou2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangjiantou1"></use>
                    </svg>
                    <div class="name">上箭头</div>
                    <div class="fontclass">#icon-shangjiantou1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoguanbi1"></use>
                    </svg>
                    <div class="name">小关闭</div>
                    <div class="fontclass">#icon-xiaoguanbi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tingyong"></use>
                    </svg>
                    <div class="name">停用</div>
                    <div class="fontclass">#icon-tingyong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youjiantou1"></use>
                    </svg>
                    <div class="name">右箭头</div>
                    <div class="fontclass">#icon-youjiantou1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuojiantou1"></use>
                    </svg>
                    <div class="name">左箭头</div>
                    <div class="fontclass">#icon-zuojiantou1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huafeiquan1"></use>
                    </svg>
                    <div class="name">话费券</div>
                    <div class="fontclass">#icon-huafeiquan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liuliangquan1"></use>
                    </svg>
                    <div class="name">流量券</div>
                    <div class="fontclass">#icon-liuliangquan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoujiduanxin"></use>
                    </svg>
                    <div class="name">手机短信</div>
                    <div class="fontclass">#icon-shoujiduanxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiatingyijianchongzhi"></use>
                    </svg>
                    <div class="name">家庭一键充值</div>
                    <div class="fontclass">#icon-jiatingyijianchongzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhiding"></use>
                    </svg>
                    <div class="name">置顶</div>
                    <div class="fontclass">#icon-zhiding</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjia1"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#icon-tianjia1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yibanduihuan"></use>
                    </svg>
                    <div class="name">一般兑换</div>
                    <div class="fontclass">#icon-yibanduihuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bangzhu1"></use>
                    </svg>
                    <div class="name">帮助</div>
                    <div class="fontclass">#icon-bangzhu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-goumai"></use>
                    </svg>
                    <div class="name">购买</div>
                    <div class="fontclass">#icon-goumai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-money"></use>
                    </svg>
                    <div class="name">money</div>
                    <div class="fontclass">#icon-money</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
